<template>
    <div class="components_test_views_index">
        <h1>components_test_views</h1>
        <ul>
            <li v-for="(item,index) in testRecords" :key="index">
            <!-- <span>{{item.title}}</span>
            <span>{{item.description}}</span> -->
            <RouterLink :to="{name:item.name}">{{item.name}}</RouterLink>
            </li>
        </ul>
        <div class="main">
            <RouterView></RouterView>
        </div>    
    </div>
    
       
    
    
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import {componentTestRoutes} from '@/routes/test/components_test_routes'
import { RouteRecordRaw } from 'vue-router';
const testRecords=ref<RouteRecordRaw[]>([]);
    // console.log(testRoutes); 
    testRecords.value=(componentTestRoutes as any).children.map((e:any)=>
        ({
        title:(e.meta?e.meta.title:'')+'',
        name:e.name as string,
        description:'description',
        component:e.component as any
        })
    )

    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
    

</script>
<style lang='less' scoped>
li span{
    margin: 20px;
}
.main{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 300px;
    top:0;
    // height: 1000px;
    
} 
</style>